<template>
<el-drawer class="map-main" :size="950" title="" :visible.sync="detaildrawer" direction="rtl">
  <div slot="title" style="font-size: 20px;">经纬度选择</div>
    <div class="btns">
      <div class="btn" :class="{actived: mapType === 'wxdt'}" @click="switchMap('wxdt')">卫星地图</div>
      <div class="btn" :class="{actived: mapType === 'pudt'}" @click="switchMap('pudt')">普通地图</div>
      <div class="btn"  @click="goback">
        <i class="el-icon-map-location"></i>朗县</div>
    </div>
    <div class="lnglat" >
      经度：{{ clickPoint.lng }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      纬度：{{ clickPoint.lat }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      地址： {{ clickPoint.address }}
    </div>
    <div id="container"></div>
    <div class="footerbtn">
      <el-button type="primary" @click="onSubmit">确认</el-button>
      </div>
  </el-drawer>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  props: {
    edit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      detaildrawer: false,
      map: null,
      mapType: 'pudt',
      clickPoint: {
        address: '',
        lng: null,
        lat: null
      },
      marker: null
    }
  },
  mounted() {
  },
  methods: {
    goback () {
      this.map.setZoom(16)
      this.map.setCenter([93.071387, 29.045426])
    },
    show(lng, lat) {
      console.log('xxxxx')
      this.detaildrawer = true
      this.clickPoint.lng = lng
      this.clickPoint.lat = lat
      this.$nextTick(() => {
        this.initMap()
      })
    },
    onSubmit () {
      this.detaildrawer = false
      this.$emit('finish', [ this.clickPoint.lng, this.clickPoint.lat, this.clickPoint.address])
    },
    onCancel () {
      this.detaildrawer = false
    },
    switchMap(type) {
      this.mapType = type
      this.initMap()
    },
    addMarker(point) {
      if (this.marker) {
        this.map.remove(this.marker)
      } 
      this.marker = new AMap.Marker({
          // position: position,
          position: point.latlan,
          icon: new AMap.Icon({
            size: new AMap.Size(50*0.7, 62*0.7),
            imageSize: new AMap.Size(50*0.7, 62*0.7),
            image:
              '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
            imageOffset: new AMap.Pixel(0, 0)
          }),
          offset: new AMap.Pixel(-13, -30)
        })
        this.marker.setMap(this.map)
     
    },
    initMap() {
      window._AMapSecurityConfig = {
        securityJsCode: 'b84662c937584aa7b912f73ca1b14ebd'
      }
      AMapLoader.load({
        key: 'f472f681a191cf68feaf93f8d8aa6808', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          'AMap.PolygonEditor',
          'AMap.Autocomplete',
          'AMap.PlaceSearch',
          'AMap.AutoComplete',
          'AMap.Geocoder'
          // , 'AMap.RoadInfoSearch'
        ]
        // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map('container', {
            //设置地图容器id
            viewMode: '3D', //是否为3D地图模式
            zoom: 16, //初始化地图级别
            // zoom: 17,      //初始化地图级别
            center:  this.clickPoint.lng ? [this.clickPoint.lng, this.clickPoint.lat] : [93.071387, 29.045426], //初始化地图中心点位置
            layers:
              this.mapType == 'wxdt'
                ? [
                    // 卫星
                    new AMap.TileLayer.Satellite(),
                    // 路网
                    new AMap.TileLayer.RoadNet()
                  ]
                : []
          })
          var geocoder = new AMap.Geocoder({
                city: "540400", //城市设为北京，默认：“全国”
                radius: 1000 //范围，默认：500
            });
          this.map.on('click', (e) => {
            console.log(e)
            this.clickPoint.lng = e.lnglat.getLng()
            this.clickPoint.lat = e.lnglat.getLat()
            this.addMarker({
              latlan: [this.clickPoint.lng, this.clickPoint.lat]
            })
            geocoder.getAddress([this.clickPoint.lng, this.clickPoint.lat], (status, result)=> {
              if (status === 'complete'&&result.regeocode) {
                  this.clickPoint.address = result.regeocode.formattedAddress;
              }else{
                console.error('根据经纬度查询地址失败')
              }
          });
          })
          if (this.clickPoint.lng) {
            this.addMarker({
              latlan: [this.clickPoint.lng, this.clickPoint.lat]
            })
          }
        })
        .catch((e) => {
          console.log(e)
        })
    }
  }
}
</script>

<style scoped lang="scss">
#container {
  padding: 30px;
  margin: 0px;
  width: 100%;
  box-sizing: border-box;
  height: calc(100vh - 150px);
  border: 10px solid #fff;
  border-radius: 10px;
}

.map-main {
  .lnglat {
    position: absolute;
    bottom: 88px;
    left: 15px;
    z-index: 99;
    background: #fefefe;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    padding: 10px 14px;
    z-index: 999;
  }
}
.btns {
  position: absolute;
  top: 100px;
  left: 30px;
  z-index: 99;
  .btn {
    padding: 10px 20px;
    margin-bottom: 5px;
    background-color: rgba($color: #fff, $alpha: 0.6);
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid #e1e2e3;
    &:hover {
      background-color: rgba($color: $primary-color, $alpha: 0.6);
      color: #fff;
    }
    &.actived {
      background-color: rgba($color: $primary-color, $alpha: 0.6);
      color: #fff;
    }
  }
}
.footerbtn {
  position: absolute;
  bottom: 10px;
  margin: 20px;
}
</style>